<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="page-view-size" content="1280*720" />
    <link rel="stylesheet" href="style/base.css" />
    <title>熊猫部落-熊猫积分</title>
    <style>
      body {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 1280px;
        height: 720px;
        background-repeat: no-repeat;
        background-color: transparent;
        overflow: hidden;
      }
      #main{
        overflow: hidden;
      }
      #title{
        position: absolute;
        width: 232px;
        height: 60px;
        left: 50px;
        top: 30px;
        font-size: 30px;
      }
      #classify{
        position: absolute;
        left: 0;
        right: 0;
        top: 175px;
      }
      #classify .item{
        position: absolute;
        box-shadow: 3px 3px 20px rgba(0,0,0,.3);
      }
       
      #classify .oh{
        width: 297px !important;
        height: 407px !important;
      }
    </style>
  </head>
  <body onload="init()">
    <div id="main">
	<!--联通不要 -->
      <div class='smallResolution' id="smallResolution"></div>
	  <!--联通不要 -->
      <div id="title"></div>
      <div id="classify"></div>
    </div>
    <script src="js/jquery.js"></script>
    <script src="config/index.js"></script>
    <script src="api/index.js"></script>
    <script src="js/utlis.js"></script>
    <script src="js/KeyEnter.js"></script>
    <script src="js/event.js"></script>
    <script src="js/move.js"></script>
    <script src="js/log.js"></script>
    <script src="js/page.js"></script>

    <script src="components/dialog.js"></script>
    <script src="components/point/classify.js"></script>
    <script>
      function getPreFocus() {
        var typeName = unescape(utils.getUrlParam("typeName", ""))
        var typeId = utils.getUrlParam("typeId", "")
        $('#title').html(typeName)
        classify.init({
          typeId: typeId
        })
        var elId = utils.getUrlParam("elId", "")
        var dom = document.getElementById(elId || "classify-0")
        dom && utils.toggleClass(dom)
        scrollNav()
      }

      function init () {
        page.init()
        getPreFocus()
        dialog.init()
        log.commit({
          name: '熊猫积分页面',
          type1: 'browse',
          type2: 'point-classify',
          starttime: new Date().getTime(),
        })
      }

      function keyUp () {}

      function keyDown () {}

      function keyLeft() {
        if (!dialog.visible) {
          var dom = move.left();
          dom && utils.toggleClass(dom);
          scrollNav()
        }
      }

      
      function keyRight() {
        if (!dialog.visible) {
          var dom = move.right();
          dom && utils.toggleClass(dom);
          scrollNav()
        }
      }
      

      function keyEnter () {
        if (dialog.visible) {
          if (dialog.back) {
            page.goback()
          } else {
            dialog.hide()
          }
        } else {
          var info = utils.getCurInfo()
          var data = page.data.classify[info.index]
          if (!data.linkUrl)  return 
          var form = config.path + '/point-classify.html?typeId=' + classify.typeId + '&elId=' + info.id
          var to = config.path + '/' + data.linkUrl + '.html?typeId=' + data.typeId + '&typeName=' + escape(data.typeName)
          page.addUrl(to, form)
        }
      }

      function keyBack () {
        if (dialog.visible) {
          dialog.hide()
        } else {
          page.goback()
        }
      }

      function scrollNav () {
        var len = page.data.classify.length
        var view = 4
        if (len < view) return
        var info = utils.getCurInfo()
        var index = info.index
        var w = 300
        var middle = Math.floor(view / 2)
        var container = $('#classify')
        if (index < middle) {
          container.css('left', 0)
        } else if ( len - index < middle ) {
          container.css('left', -(len - view) * w)
        } else {
          container.css('left', -(index - middle) * w)
        }
      }
    </script>
  </body>
</html>
